@import '../../common';

.class-container {
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;

	.class-title {
		line-height: 32rpx;
		@include flex-space-between;

		.left {
			@include fontStyle(32, 32, #000000, 500);
		}

		.right {
			@include flex;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			text {
				@include fontStyle(28, 28, #999999, 400);
				margin: 0 4rpx;
			}
		}
	}

	.tag-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;

		text {
			border-radius: 4rpx;
			border: 1rpx solid #999999;
			padding: 0 8rpx;
			margin: 0 16rpx 16rpx 0;
			@include fontStyle(24, 32, #999999, 400);
		}
	}

	.custom-swiper-box {
		width: 100%;
		overflow-x: auto;
		margin: 8rpx 0 24rpx 0;
	}

	.custom-swiper {
		width: 100%;
		height: 146rpx;
		white-space: nowrap;

		.block{
			width: 258rpx;
			height: 100%;
			margin: 0 16rpx 0 0;
			display: inline-block;
		}
		.item-box {
			position: relative;
			width: 258rpx;
			height: 100%;
			border-radius: 8rpx;
			overflow: hidden;
			// margin: 0 16rpx 0 0;
			display: inline-block;
			

			.img {
				width: 100%;
				height: 100%;
				display: block;
			}

			text {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 10;
				background-color: rgba(0, 0, 0, 0.65);
				font-size: 20rpx;
				color: #ffffff;
				padding: 4rpx 8rpx;
				border-radius: 8rpx 0 8rpx 0;
			}

			.video-shade {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 8;
				background-color: rgba(0, 0, 0, 0.5);
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;

				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}

.class-type .class-type-item:not(:last-child) {
	margin-bottom: 24rpx;
}